<template>
  <el-form ref="userInfoRef" :model="userInfo" :rules="userInfoRules">
    <el-form-item label="编号" prop="aid">
      <el-input v-model="userInfo.aid" :disabled="true" />
    </el-form-item>
    <el-form-item label="用户名" prop="account">
      <el-input v-model="userInfo.account" :disabled="true" />
    </el-form-item>
    <el-form-item label="真实姓名" prop="realname">
      <el-input v-model="userInfo.realname" />
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-select v-model="userInfo.sex" placeholder="请选择性别">
        <el-option label="男" value="男" />
        <el-option label="女" value="女" />
      </el-select>

    </el-form-item>
    <el-form-item label="身份证号" prop="idcard">
      <el-input v-model="userInfo.idcard" />
    </el-form-item>
    <el-form-item label="所属工作" prop="job">
      <el-input v-model="userInfo.job" :disabled="true" />
    </el-form-item>
    <el-form-item label="管辖街道" prop="street">
      <el-input v-model="userInfo.street" :disabled="true" />
    </el-form-item>
    <el-form-item label="电话号码" prop="tel">
      <el-input v-model="userInfo.tel" />
    </el-form-item>
    <el-form-item label="电子邮箱" prop="email">
      <el-input v-model="userInfo.email" />
    </el-form-item>
    <el-form-item label="家庭地址" prop="address">
      <el-input v-model="userInfo.address" />
    </el-form-item>
    <el-form-item label="权限" prop="role">
      <el-input v-model="userInfo.role" :disabled="true" />
    </el-form-item>
    <el-form-item>
      <el-button class="detail" @click="submit">更新</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { fetchUser, updateUser } from '@/api/profile'
export default {
  data() {
    const chinaIdentityValid = (rule, value, callback) => {
      if (!value) {
        return callback()
      }
      const city = {
        11: '北京',
        12: '天津',
        13: '河北',
        14: '山西',
        15: '内蒙古',
        21: '辽宁',
        22: '吉林',
        23: '黑龙江 ',
        31: '上海',
        32: '江苏',
        33: '浙江',
        34: '安徽',
        35: '福建',
        36: '江西',
        37: '山东',
        41: '河南',
        42: '湖北 ',
        43: '湖南',
        44: '广东',
        45: '广西',
        46: '海南',
        50: '重庆',
        51: '四川',
        52: '贵州',
        53: '云南',
        54: '西藏 ',
        61: '陕西',
        62: '甘肃',
        63: '青海',
        64: '宁夏',
        65: '新疆',
        71: '台湾',
        81: '香港',
        82: '澳门',
        91: '国外'
      }
      if (
        !value ||
        !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(
          value
        )
      ) {
        callback(new Error('身份证号格式错误'))
      } else if (!city[value.substr(0, 2)]) {
        callback(new Error('身份证号格式错误'))
      } else {
        // 18位身份证需要验证最后一位校验位
        if (value.length === 18) {
          const code = value.split('')
          // ∑(ai×Wi)(mod 11)
          // 加权因子
          const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
          // 校验位
          const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
          let sum = 0
          let ai = 0
          let wi = 0
          for (let i = 0; i < 17; i++) {
            ai = code[i]
            wi = factor[i]
            sum += ai * wi
          }
          if (parity[sum % 11].toString() !== code[17]) {
            callback(new Error())
          }
        }
      }
      callback()
    }

    // 验证邮箱的规则
    const checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }

      cb(new Error('请输入合法的邮箱'))
    }

    // 验证手机号的规则
    const checkMobile = (rule, value, cb) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        // 合法的手机号码
        return cb()
      }
      cb(new Error('手机号码格式不正确'))
    }

    return {
      // 用户信息
      userInfo: {},
      // 用户信息验证
      userInfoRules: {
        idcard: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          {
            pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
            message: '请输入正确的证件号',
            trigger: 'blur'
          },
          { validator: chinaIdentityValid, trigger: 'blur' }
        ],
        realname: {
          required: true,
          message: '请输入真实姓名',
          trigger: 'blur'
        },
        sex: {
          required: true,
          message: '请输入性别',
          trigger: 'blur'
        },
        address: {
          required: true,
          message: '请输入家庭住址',
          trigger: 'blur'
        },
        tel: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          {
            validator: checkMobile,
            trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            validator: checkEmail,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getInformation()
  },
  methods: {
    submit() {
      this.$refs['userInfoRef'].validate((valid) => {
        if (valid) {
          updateUser(this.userInfo).then((response) => {
            this.$message({
              type: 'success',
              message: '更新成功!'
            })
            this.getInformation()
          })
        }
      })
    },
    getInformation() {
      this.listLoading = true
      fetchUser().then((response) => {
        this.userInfo = response.data
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    }
  }
}
</script>

<style scoped>

.detail {
  background-color: lightseagreen;
  color: #fff;
  border-radius: 10px;
  border: none;
}
.detail:hover {
  background-color: rgb(34, 149, 194);
  color: #fff;
  border-radius: 10px;
  border: none;
}
</style>
